import React from 'react'
import { NavBar, Space, Toast, Card } from 'antd-mobile'
import { useLocation, useNavigate } from 'react-router-dom'
import { MailOutline } from 'antd-mobile-icons'
import { Badge } from 'antd-mobile'
import { CapsuleTabs, Image } from 'antd-mobile'
import style from '../class/index.module.css'
import { MessageFill, HeartFill } from 'antd-mobile-icons'
import Hoc_login from '../../utils/Hoc_login'
function Index() {
  const navigate = useNavigate();
  const back = () => navigate('/index')
  const { state } = useLocation();
  console.log(state);

  const goDetail = () => {
    navigate('/detail', { state: state })
  }
   const goDetail1 = () => {
    navigate('/detail1', { state: state })
  }
   const goDetail2 = () => {
    navigate('/detail2', { state: state })
  }
  return (
    <div>
      <NavBar onBack={back} right={<span>   <Badge content='2'>
        <MailOutline fontSize={20} />
      </Badge></span>}><span style={{ float: 'left', marginRight: '90px' }}>我的预定</span></NavBar>


      <CapsuleTabs>
        <CapsuleTabs.Tab title='活动状态' key='fruits'>

          <div>
            <Card className={style.carrd} onClick={() => goDetail()}>
              <span className={style.cards}>待使用</span>
              <div className={style.csda}>
                <Image className={style.imagges} src={state.image}></Image>
                <span>{state.title}</span>
                <span className={style.money}>￥{state.price}</span>
              </div>
              <span className={style.chang}>XXX演唱会</span>
              <div className={style.messges}>
                <span>持票人</span>
                <span>地点</span>
                <span>日期</span>

                <span>Koto</span>
                <span>北京体育馆</span>
                <span>2024-11-12</span>
              </div>
            </Card>


          </div>

        </CapsuleTabs.Tab>
        <CapsuleTabs.Tab title='活动时间' key='vegetables'>

          <Card className={style.carrd} onClick={() => goDetail1()}>
            <span className={style.cards}>已取消</span>
            <div className={style.csda}>
              <Image className={style.imagges} src='https://robohash.org/150000201011033240?set=set2'></Image>
              <span>{state.title}</span>
              <span className={style.money}>￥{state.price}</span>
            </div>
            <span className={style.chang}>XXX演唱会</span>
            <div className={style.messges}>
              <span>持票人</span>
              <span>地点</span>
              <span>日期</span>

              <span>Koto</span>
              <span>北京体育馆</span>
              <span>2024-11-12</span>
            </div>
          </Card>

          <div style={{ marginTop: '20px' }}>
            <Card className={style.carrd} onClick={() => goDetail1()}>
              <span className={style.cards}>已取消</span>
              <div className={style.csda}>
                <Image className={style.imagges} src='https://robohash.org/310000202212095880?set=set4'></Image>
                <span>{state.title}</span>
                <span className={style.money}>￥{state.price}</span>
              </div>
              <span className={style.chang}>XXX演唱会</span>
              <div className={style.messges}>
                <span>持票人</span>
                <span>地点</span>
                <span>日期</span>

                <span>Koto</span>
                <span>北京体育馆</span>
                <span>2024-11-12</span>
              </div>
            </Card>
          </div>
        </CapsuleTabs.Tab>
        <CapsuleTabs.Tab title='已使用' key='animals'>
          <Card className={style.carrd} onClick={() => goDetail2()}>
            <span className={style.cards}>已使用</span>
            <div className={style.csda}>
              <Image className={style.imagges} src='https://robohash.org/520000202311238954?set=set4'></Image>
              <span>{state.title}</span>
              <span className={style.money}>￥{state.price}</span>
            </div>
            <span className={style.chang}>XXX演唱会</span>
            <div className={style.messges}>
              <span>持票人</span>
              <span>地点</span>
              <span>日期</span>

              <span>Koto</span>
              <span>北京体育馆</span>
              <span>2024-11-12</span>
            </div>
          </Card>

          <div style={{marginTop:'20px'}}>
            <Card className={style.carrd} onClick={() => goDetail2()}>
              <span className={style.cards}>已使用</span>
              <div className={style.csda}>
                <Image className={style.imagges} src='https://robohash.org/710000201906251788?set=set3'></Image>
                <span>{state.title}</span>
                <span className={style.money}>￥{state.price}</span>
              </div>
              <span className={style.chang}>XXX演唱会</span>
              <div className={style.messges}>
                <span>持票人</span>
                <span>地点</span>
                <span>日期</span>

                <span>Koto</span>
                <span>北京体育馆</span>
                <span>2024-11-12</span>
              </div>
            </Card>
          </div>
        </CapsuleTabs.Tab>
      </CapsuleTabs>
    </div>
  )
}

export default   Hoc_login (Index)
